<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .leftTiyle {
            font-size: 25px;
            padding-left: 30px;
            font-weight: 600;
            color: #545454;
            float: left;
        }

        .top {
            width: 100%;
            float: left;
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid #b0cdff;
        }

        .thisUser {
            float: right;
            margin-right: 30px;
        }

        #demo4 {
            text-align: center;
        }

        .tt {
            width: 100px;
            height: 20px;
            float: right;
            margin-right: 30px;
        }

        .ssa {
            margin-top: 10px;
        }

        /* 搜索框 */
        .search {
            width: 40%;
            margin: 0 auto;
            display: flex;
            /*border: 1px solid red;*/
        }

        .search input {
            float: left;
            flex: 4;
            height: 30px;
            outline: none;
            border: 1px solid red;
            box-sizing: border-box;
            padding-left: 10px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            background-color: red;
            color: white;
            border-style: none;
            outline: none;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }
        .box { margin:20px 0;
            position: absolute;
            left: 650px;
            top: 700px;

        }
        .box a{
            padding: 5px;
            border: 1px solid blue;
            margin:3px;
            text-decoration: none;
            border-radius: 5px;
        }
        .box a.high {
            background-color: #007DDB;
        }
        #sx{
            position: absolute;
            right: 20px;
            top: 150px;
            width: 90px;
            height: 40px;
        }
        #demo7{
            position: absolute;
            top: 600px;
            left: 0px;
        }
        #demo8{
            position: absolute;
            top: 600px;
            left: 250px;
        }
    </style>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
</head>

<body>
<div class="top">
    <div class="leftTiyle" id="flTitle" style="color: gray">商品管理</div>
    <div class="thisUser"></div>
</div>
<button id="tj" class="layui-btn" style="float:right; margin-right: 20px">添加商品</button>
<hr style="background-color: white;">
<div class="search">
    <select name="city" lay-verify="" id="searchway" style="width: 50px">
        <option>根据分类查询</option>
        <option th:each="obj: ${list}" th:text="${obj.lxname}" th:value="${obj.lxname}" class="xiala"></option>
    </select>
    <input type="text" class="ecw" placeholder="按商品名称查询..." name="" id="" value="" />
    <button class="searchbt"><i class="layui-icon layui-icon-search"></i></button>
</div>
<table class="layui-table">
    <thead>
    <tr>
        <th>商品ID</th>
        <th>商品分类ID</th>
        <th>商品名称</th>
        <th>商品图片</th>
        <th>商品详情</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>商品状态</th>
        <th>商品型号</th>
        <th>商品上架时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="vrve">
    <tr th:each=" obj: ${info.list}">
        <td th:text="${obj.id}"></td>
        <td th:text="${obj.categoryid}"></td>
        <td th:text="${obj.name}"></td>
        <td><img th:src="'/img/JiXeiShu/'+${obj.mainimage}" style="width: 50px; height: 50px"></td>
        <td th:text="${obj.detail}"></td>
        <td th:text="${obj.price}"></td>
        <td th:text="${obj.stock}"></td>
        <td th:text="${obj.status}"></td>
        <td th:text="${obj.xinghaoname}"></td>
        <td th:text="${#dates.format(obj.createtime,'yyyy-MM-dd')}"></td>
        <td>

            <div class="layui-btn-group">
                <i class="btn1" th:value="${obj.id}" id="id">
                <button id="updat" type="button" class="layui-btn layui-btn-primary layui-btn-sm" th:value="${obj.id}">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                </i>
                <i class="btn2" th:value="${obj.id}" id="sc" name="spsc">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe640;</i>
                </button>
                </i>
            </div>
        </td>
    </tr>
    <div class="box">
        <a href="1" th:value="1">首页</a>
        <a th:class="${ p==info.pageNum ? 'high' : ''}"
           th:each="p : ${info.navigatepageNums}"
           th:href="${p}"
           th:text="${p}" th:value="${p}">1</a>
        <a th:href="${info.pages}" th:value="${info.pages}">尾页</a>
    </div>

<input type=button value="刷新商品" onclick="location.reload()" class="layui-btn layui-btn-sm" id="sx">
<div id="demo7" hidden>
    <form action="#"  method="POST" enctype="multipart/form-data" id="file_id">
        商品分类<input type="text" name="categoryid" id="fl"><br>
        商品名称<input type="text" name="name" id="name"><br>
        商副标题<input type="text" name="subtitle" id="bt"><br>
        商品图片<input type="file" name="file1"><br>
        商品详情<input type="text" name="detail" id="xq"><br>
        商品价格<input type="text" name="price" id="jg"><br>
        商品数量<input type="text" name="stock" id="sl"><br>
        商品状态<input type="text" name="status" id="zt"><br>
        商品型号<input type="text" name="xinghaoname" id="xh"><br>
    </form>
    <button type="button" class="tjbutton">添加商品</button>
</div>

<!--//修改-->
<div id="demo8" hidden>
    <form action="#"  method="POST" enctype="multipart/form-data" id="file_idc">
    分类ID<input type="text" name="categoryid" id="spfl"><br>
    商品名称<input type="text" name="name" id="spmc" ><br>
    商副标题<input type="text" name="subtitle" id="spbt"><br>
    商品图片<input type="file" name="file2" ><br>
    商品详情<input type="text" name="detail" id="spxq"><br>
    商品价格<input type="text" name="price" id="spjg"><br>
    商品数量<input type="text" name="stock" id="spsl"><br>
    商品状态<input type="text" name="status" id="spzt"><br>
    商品型号<input type="text" name="xinghaoname" id="spxh"><br>
    </form>
    <button type="button" class="xiugai">修改商品</button>
</div>
    </tbody>
</table>
<script>
    //商品添加
    $(function (){
        $(".tjbutton").click(function (){
        //     $("tbody").on('click','.tjbutton',function(){
            var spfl=$("#fl").val();
            var spmc=$("#name").val();
            var spbt=$("#bt").val();
            var spxq=$("#xq").val();
            var spjg=$("#jg").val();
            var spls=$("#sl").val();
            var spzt=$("#zt").val();
            var spxh=$("#xh").val();
            var formData = new FormData($("#file_id")[0]);
            $.ajax({
                url:"/spadd?"+'categoryid='+spfl+'&name='+spmc+'&subtitle='+spbt+'&detail='+spxq+'&price='+spjg+'&stock='+spls+'&status='+spzt+'&xinghaoname'+spxh,
                type:"post",
                data: formData,
                contentType: false,//告诉客户端不要设置Content-Type 请求头部
                processData: false,//告诉客户端不处理过程数据
                success: function (obj) {//完成后的事件
                    console.log(obj)
                    if (obj==1){
                        alert("添加成功！")
                        $("#demo7").hide();
                    }else{
                        alert("添加失败！")
                    }
                }
            })
        })
    });
    //商品id查询赋值给文本框
    var spcxid;
    // $(".btn1").click(function (){
        $("tbody").on('click','.btn1',function(){
        $("#demo8").show();
        console.log($(this).attr("value"));
        // alert($(this).attr("value"));
        spcxid=$(this).attr("value");
        var data = {"id": spcxid};
        $.ajax({
            url: "/spidcx",
            type: "post",
            contentType:'application/json',
            data:JSON.stringify(data),
            success: function (obj) {
                console.log(obj.data)
                for (var i=0;i<obj.data.length;i++){
                    console.log(obj.data[i].name)
                    $("#spfl").val(obj.data[i].categoryid);
                    $("#spmc").val(obj.data[i].name);
                    $("#spbt").val(obj.data[i].subtitle);
                    $("#spxq").val(obj.data[i].detail);
                    $("#spjg").val(obj.data[i].price);
                    $("#spsl").val(obj.data[i].stock);
                    $("#spzt").val(obj.data[i].status);
                    $("#spxh").val(obj.data[i].xinghaoname);
                }
            }
        });
    })
    //商品修改
    $(function (){
        // $("tbody").on('click','.xiugai',function(){
        $(".xiugai").click(function (){
            // alert(spcxid);
            console.log(spcxid);
            var spfl=$("#spfl").val();
            var spmc=$("#spmc").val();
            var spbt=$("#spbt").val();
            var spxq=$("#spxq").val();
            var spjg=$("#spjg").val();
            var spsl=$("#spsl").val();
            var spzt=$("#spzt").val();
            var spxh=$("#spxh").val();
            // alert("来了")
            // var spsj=$("#spsj").val();
            // $("#spsj").datepick(‘getDate’);
            // var s=$("#spsj").datetime()
            console.log(spfl+"--"+spmc+"--"+spbt+"--"+spxq+"--"+spjg+"--"+spsl+"--"+spzt+"--"+spxh+"--"+spcxid);
            var formData = new FormData($("#file_idc")[0]);
            //var data=formData;
            $.ajax({
                url:"/spxiugai?"+'categoryid='+spfl+'&name='+spmc+'&subtitle='+spbt+'&detail='+spxq+'&price='+spjg+'&stock='+spsl+'&status='+spzt+'&xinghaoname='+spxh+"&id="+spcxid,
                type:"post",
                data: formData,
                contentType: false,  //告诉客户端不要设置Content-Type 请求头部
                processData: false,//告诉客户端不处理过程数据
                success: function (obj) {//完成后的事件
                    console.log(obj)
                    if (obj==1){
                        alert("修改成功！")
                        $("#demo8").hide();
                    }else{
                        alert("修改失败！")
                    }
                }
            })
        })
    })


    $("#tj").click(function (){
        $("#demo7").show();
    })




    // $(".btn2").click(function () {
        $("tbody").on('click','.btn2',function(){
        var spid=$(this).attr("value")
        // alert(1);
        // alert(spid);
        console.log("删除"+spid)
        var data = {"id": spid};
        $.ajax({
            url: "/sc",
            type: "post",
            contentType:'application/json',
            data:JSON.stringify(data),
            success: function (obj) {
                if (obj == 1) {
                    alert("删除成功");
                } else if (obj==0) {
                    alert("删除失败")
                }
            }
        });
    });
    var t;
    $(function(){
        $("#searchway").change(function(){
            t = $(this).val();
            // alert(t);
            //button点击事件
            $(".searchbt").click(function (){
                alert("来了")
                alert(t)
                var data = {"flname": t};
                $.ajax({
                    url: "/spflcx",
                    type: "post",
                    contentType:'application/json',
                    data:JSON.stringify(data),
                    success : function(obj) {
                        $(".vrve").empty();
                        console.log(obj.data);
                        for(var i = 0; i < obj.data.length; i++) {
                            var bj =("<tr>"+"<td>"+ obj.data[i].id  + "</td>"+
                                "<td>"+obj.data[i].categoryid  +"</td>"+
                                "<td>"+obj.data[i].name  +"</td>"+
                                "<td>"+"<img style='width: 50px; height: 50px' src=/img/"+obj.data[i].mainimage+"/>"+"</td>"+
                                "<td>"+obj.data[i].detail  +"</td>"+
                                "<td>"+obj.data[i].price+"</td>"+
                                "<td>"+obj.data[i].stock +"</td>"+
                                "<td>"+obj.data[i].status +"</td>"+
                                "<td>"+obj.data[i].xinghaoname +"</td>"+
                                "<td>"+obj.data[i].createtime +"</td>"+
                                "<td>"+"<div class=\"layui-btn-group\">\n" +
                                "                <i class=\"btn1\" value='"+obj.data[i].id+"' name=\"id\">\n" +
                                "                <button class=\"layui-btn layui-btn-primary layui-btn-sm\"  th:value=\"${h.id}\" type=\"button\">\n" +
                                "                    <i class=\"layui-icon\">&#xe642;</i>\n" +
                                "                </button>\n" +
                                "                </i>\n" +
                                "                <i class=\"btn2\" value='"+obj.data[i].id+"' id=\"sc\" name=\"spsc\">\n" +
                                "                   <button class=\"layui-btn layui-btn-primary layui-btn-sm\" type=\"button\">\n" +
                                "                    <i class=\"layui-icon\">&#xe640;</i>\n" +
                                "                   </button>\n" +
                                "                </i>\n" +
                                "            </div>"+"</td>"+"</tr>");
                            $(".vrve").append(bj);
                            $(".box").hide();
                        }
                    },
                    "error": function() {
                        alert("查询失败....")
                    }
                });
            })
        })
    });

    $(function(){
        //button点击事件
        $(".searchbt").click(function (){
            var t = $(".ecw").val();
            // alert(t)
            var data = {"name": t};
            $.ajax({
                url: "/spmccx",
                type: "post",
                contentType:'application/json',
                data:JSON.stringify(data),
                success : function(obj) {
                    $(".vrve").empty();
                    console.log(obj.data);
                    for(var i = 0; i < obj.data.length; i++) {
                        var bj =("<tr>"+"<td>"+ obj.data[i].id  + "</td>"+
                            "<td>"+obj.data[i].categoryid  +"</td>"+
                            "<td>"+obj.data[i].name  +"</td>"+
                            "<td>"+"<img style='width: 50px; height: 50px' src=/img/"+obj.data[i].mainimage+"/>"+"</td>"+
                            "<td>"+obj.data[i].detail  +"</td>"+
                            "<td>"+obj.data[i].price+"</td>"+
                            "<td>"+obj.data[i].stock +"</td>"+
                            "<td>"+obj.data[i].status +"</td>"+
                            "<td>"+obj.data[i].xinghaoname +"</td>"+
                            "<td>"+obj.data[i].createtime +"</td>"+
                            "<td>"+"<div class=\"layui-btn-group\">\n" +
                            "                <i class=\"btn1\" value='"+obj.data[i].id+"' name=\"id\">\n" +
                            "                <button class=\"layui-btn layui-btn-primary layui-btn-sm\"  th:value=\"${h.id}\" type=\"button\">\n" +
                            "                    <i class=\"layui-icon\">&#xe642;</i>\n" +
                            "                </button>\n" +
                            "                </i>\n" +
                            "                <i class=\"btn2\" value='"+obj.data[i].id+"' id=\"sc\" name=\"spsc\">\n" +
                            "                   <button class=\"layui-btn layui-btn-primary layui-btn-sm\" type=\"button\">\n" +
                            "                    <i class=\"layui-icon\">&#xe640;</i>\n" +
                            "                   </button>\n" +
                            "                </i>\n" +
                            "            </div>"+"</td>"+"</tr>");
                        $(".vrve").append(bj);
                        $(".box").hide();
                        $(".ecw").val("");

                    }
                },
                "error": function() {
                    alert("查询失败....")
                }
            });
        })

    });






</script>
</body>
</html>